<template>
    <div class="data-summary">
        <div class="time-groups">
            <p v-for="item in timeGroups" :key="item.value"
                :class="['time-groups-item', 'cursor-pointer', { active: timeGroup === item.value }]"
                @click="handleTimeGroupClick(item.value)">{{ item.label }}</p>
        </div>

        <div class="proxy-links-box mt-14">
            <div class="proxy-links-box-title">
                <p class="proxy-title-item"><span class="flex-start">直属数据
                        <iconpark-icon @click="showDialogHandler(1)" icon-id="question1" size="1rem"
                            style="margin-left: 4px;"></iconpark-icon>
                    </span></p>

                <p class="proxy-title-item">
                    <i class="icon-question"></i>
                </p>
            </div>
            <div class="proxy-links-box-content">
                <div class="data-item" v-for="(data, index) in dataItems" :key="index">
                    <p class="data-value">{{ data.value }}</p>
                    <p class="data-label">{{ data.label }}</p>
                </div>
            </div>
        </div>

        <div class="proxy-links-box mt-14">
            <div class="proxy-links-box-title">
                <p class="proxy-title-item"><span class="flex-start">团队数据 <iconpark-icon @click="showDialogHandler(2)"
                            icon-id="question1" size="1rem" style="margin-left: 4px;"></iconpark-icon>
                    </span></p>

                <p class="proxy-title-item">
                    <i class="icon-question"></i>
                </p>
            </div>
            <div class="proxy-links-box-content">
                <div class="data-item" v-for="(data, index) in teamDataItems" :key="index">
                    <p class="data-value">{{ data.value }}</p>
                    <p class="data-label">{{ data.label }}</p>
                </div>
            </div>
        </div>

        <div class="proxy-links-box mt-14">
            <div class="proxy-links-box-title">
                <p class="proxy-title-item"><span class="flex-start">汇总数据 <iconpark-icon @click="showDialogHandler(3)"
                            icon-id="question1" size="1rem" style="margin-left: 4px;"></iconpark-icon>
                    </span></p>

                <p class="proxy-title-item">
                    <i class="icon-question"></i>
                </p>
            </div>
            <div class="proxy-links-box-content">
                <div class="data-item" v-for="(data, index) in summaryDataItems" :key="index">
                    <p class="data-value">{{ data.value }}</p>
                    <p class="data-label">{{ data.label }}</p>
                </div>
            </div>
        </div>
    </div>
    <PopupCom v-model:visible="showPopup" :title="title">
        <div class="popup-content">
            <div class="popup-content-title">
                <span>{{ content }}</span>
            </div>
        </div>
    </PopupCom>
</template>


<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import PopupCom from '@/components/PopupCom.vue';

import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";
const tabValue = defineModel('tabValue', {required: true, default: '1'});

const showPopup = ref(false);
const title = ref('');
const content = ref('');

const timeGroups = reactive([
    { label: '今日', value: 'today' },
    { label: '昨日', value: 'yesterday' },

    { label: '本周', value: 'week' },
    { label: '上周', value: 'lastWeek' },
    { label: '本月', value: 'month' },
    { label: '上月', value: 'lastMonth' },
    { label: '60日', value: '60Days' }
]);

const dataItems = ref([
    { value: '0', label: '新增' },
    { value: '0', label: '首充人数' },
    { value: '0', label: '首充金额' },
    { value: '0', label: '充值人次' },
    { value: '0', label: '充值金额' },
    { value: '0', label: '提现金额' },
    { value: '0', label: '有效投注' },
    { value: '0', label: '输赢金额' },
    { value: '0', label: '佣金' }
]);

const teamDataItems = ref([
    { value: '0', label: '新增' },
    { value: '0', label: '首充人数' },
    { value: '0', label: '首充金额' },
    { value: '0', label: '充值人次' },
    { value: '0', label: '充值金额' },
    { value: '0', label: '提现金额' },
    { value: '0', label: '有效投注' },
    { value: '0', label: '输赢金额' },
    { value: '0', label: '佣金' }
])

const summaryDataItems = ref([
    { value: '0', label: '累计佣金' },
    { value: '0', label: '累计充值' },
    { value: '0', label: '累计有效投注' },
    { value: '0', label: '累计输赢' },
])

// 数据映射表
const mapping:any = ref({
    new_direct: '新增',
    deposit1_num_direct: '首充人数',
    deposit1_direct: '首充金额',
    deposit_num_direct: '充值人次',
    deposit_direct: '充值金额',
    withdraw_direct: '提现金额',
    bet_direct: '有效投注',
    netwin_direct: '输赢金额',
    return_direct: '佣金'
});

// 团队数据映射表
const teamMapping:any = ref({
    new_team: '新增',
    deposit1_num_team: '首充人数',
    deposit1_team: '首充金额',
    deposit_num_team: '充值人次',
    deposit_team: '充值金额',
    withdraw_team: '提现金额',
    bet_team: '有效投注',
    netwin_team: '输赢金额',
    return_team: '佣金'
});

// 累计数据映射表
const summaryMapping:any = ref({
    return: '累计佣金',
    deposit: '累计充值',
    bet: '累计有效投注',
    netwin: '累计输赢'
});

const startTime = reactive({
  year: 0, 
  month: 0, 
  day: 0, 
  hour: 0, 
  minute: 0, 
  second: 0
})

const endTime = reactive({
  year: 0, 
  month: 0, 
  day: 0, 
  hour: 0, 
  minute: 0, 
  second: 0
})


const timeGroup = ref('today');

const formatDate = (date: Date, isEndTime = false) => ({
  year: date.getFullYear(),
  month: date.getMonth() + 1, // 月份从 0 开始，需要加 1
  day: date.getDate(),
  hour: isEndTime ? 23 : 0,
  minute: isEndTime ? 59 : 0,
  second: isEndTime ? 59 : 0,
});


const handleTimeGroupClick = async (value: string) => {
  timeGroup.value = value;
  const now = new Date();
  let start, end;
  switch (value) {
    case 'today': // 今日
      start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
      end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
      break;

    case 'yesterday': // 昨天
      start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 0, 0, 0);
      end = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 23, 59, 59);
      break;

    case 'week': // 本周（周一 00:00:00 至 本周日 23:59:59）
      start = new Date(now);
      start.setDate(start.getDate() - start.getDay() + 1); // 设为本周一
      start.setHours(0, 0, 0);
      end = new Date(start);
      end.setDate(end.getDate() + 6); // 设为本周日
      end.setHours(23, 59, 59);
      break;

    case 'lastWeek': // 上周（上周一 00:00:00 至 上周日 23:59:59）
      start = new Date(now);
      start.setDate(start.getDate() - start.getDay() - 6); // 设为上周一
      start.setHours(0, 0, 0);
      end = new Date(start);
      end.setDate(end.getDate() + 6); // 设为上周日
      end.setHours(23, 59, 59);
      break;

    case 'month': // 本月（1号 00:00:00 至 本月最后一天 23:59:59）
      start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
      end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
      break;

    case 'lastMonth': // 上月（上月 1 号 00:00:00 至 上月最后一天 23:59:59）
      start = new Date(now.getFullYear(), now.getMonth() - 1, 1, 0, 0, 0);
      end = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59);
      break;

    case '60Days': // 过去 60 天（60 天前 00:00:00 至 昨天 23:59:59）
      start = new Date();
      start.setDate(start.getDate() - 60);
      start.setHours(0, 0, 0);
      end = new Date();
      end.setDate(end.getDate() - 1); // 设为昨天
      end.setHours(23, 59, 59);
      break;

    default: // 其他情况，清空时间
      start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
      end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
  }

  Object.assign(startTime, formatDate(start));
  Object.assign(endTime, formatDate(end, true));
  await getSummaryInfo();
};



const showDialogHandler = (type: number) => {
    let ct: any = '', t: any = ''
    if (type === 1) {
        ct = '直属=直属下级玩家和本账号'
        t = '直属数据'
    } else if (type === 2) {
        ct = '团队=直属下级玩家和本账号'
        t = '团队数据'
    } else if (type === 3) {
        ct = '汇总=直属数据+团队数据'
        t = '汇总数据'
    }


    title.value = t;
    content.value = ct;
    showPopup.value = true;

}


const getSummaryInfo = () => {
    // @ts-ignore
    const req:any = NetPacket.req_summary_info();
    Object.assign(req.start_time, startTime) // 开始时间
    Object.assign(req.end_time, endTime) // 结束时间
    PKwebsocket.instance.send(req, true, {
        callbackName: 'msg_notify_summary_info',
        callback: getSummaryInfoHandle
    })
}

const getSummaryInfoHandle = (data: any) => {
    updateData(data);
}


// 赋值数据
const updateData = (data: any) => {
    dataItems.value.forEach((item, index) => {
        const key = Object.keys(mapping.value).find(key => mapping.value[key] === item.label);
        if (key) {
            dataItems.value[index].value = data[key] ?? '-';
        }
    });

    teamDataItems.value.forEach((item, index) => {
        const key = Object.keys(teamMapping.value).find(key => teamMapping.value[key] === item.label);
        if (key) {
            teamDataItems.value[index].value = data[key] ?? '-';
        }
    });

    summaryDataItems.value.forEach((item, index) => {
        const key = Object.keys(summaryMapping.value).find(key => summaryMapping.value[key] === item.label);
        if (key) {
            summaryDataItems.value[index].value = data[key] ?? '-';
        }
    });
};


watch(tabValue, (value) => {
    if(value === '2') {
        handleTimeGroupClick('today')
    }
}, { immediate: true })


</script>

<style scoped lang="scss">
$primary-bg-color: #131232;
$primary-title-bg-color: #1F1F4C;
$unactive-color: #C6C4F5;
$active-color: #FFF;

.data-summary {

    .flex-center {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .flex-start {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .mt-14 {
        margin-top: 14px;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .time-groups {
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        gap: 8px;

        p {
            border-radius: 4px;
            display: flex;
            width: 43px;
            height: 24px;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            color: $unactive-color;

            &.active {
                font-weight: 500;
                background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
                box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
                color: $active-color;
            }
        }
    }

    .proxy-links-box {
        background-color: $primary-bg-color;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 14px;

        .proxy-links-box-title {
            border-radius: 12px 12px 0 0;
            height: 36px;
            font-size: 14px;
            font-weight: 400;
            padding: 0 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: $primary-title-bg-color;
            color: $unactive-color;
            border-bottom: 0.5px solid #353562;

            .proxy-title-item {
                &:last-child {
                    text-align: right;
                }

                flex: 1;

                span {
                    color: $active-color;
                }
            }
        }

        .proxy-links-box-content {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-radius: 0px 0px 8px 8px;
            background: #131232;

            .data-item {
                background-color: $primary-bg-color;
                padding: 10px;
                text-align: center;

                .data-value {
                    font-size: 14px;
                    font-weight: 700;
                    color: $active-color;
                    margin-bottom: 4px;
                }

                .data-label {
                    font-size: 10px;
                    color: $unactive-color;
                }
            }
        }
    }
}
</style>